<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>my cards</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="/static/css/style.css" rel="stylesheet">
</head>

<body>
    <h2 align="center">我的清单人生</h2>

    <div class="container">
        <!-- Card Add Form -->
        <form id="add-card-form" action="/cards/add_new_card" method="POST">
            <div class="row">
                <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                    <select id="category-select" name="category" class="form-control">
                        {% if category_now.id == 2 %}
                            <option value="" selected disabled>选择分类</option>
                        {% else %}
                            <option value="{{ category_now.id }}" selected>{{ category_now.name }}</option>
                        {% endif %}
                        {% for category in categories %}
                            {% if category != category_now and category.id != 2 %}
                                <option value="{{ category.id }}">{{ category.name }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>

                <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                    <input class="form-control" id="card_headline" type="text" name="card_headline" placeholder="想要做些什么呢">
                </div>

                <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                    <input class="form-control" id="card_date" type="text" name="card_date" placeholder="输入截止日期">
                </div>

                <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                    <select id="type-select" name="card_type" class="form-control">
                        <option value="3" selected>紧急不重要</option>
                        <option value="4">不重要不紧急</option>
                        <option value="2">重要不紧急</option>
                        <option value="1">重要紧急</option>
                    </select>
                </div>

                <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                    <button type="submit" class="btn btn-danger">添加</button>
                </div>
            </div>
        </form>

        <!-- Categories -->
        <div class="row">
            {% for category in categories[2:] %}
                {% if category.name in ["日清单", "周清单", "月清单", "年清单", "十年清单"] %}
                    <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                        <a href="/cards/delete_category/{{ category.id }}" class="right delete-category red-text" title="delete it?">x</a>
                        <a href="/cards/category/{{ category.id }}" class="btn btn-primary collection-item {% if category == category_now %}active{% endif %}">
                            {{ category.name }} <span class="badge {% if category == category_now %}white-text{% endif %}">{{ times_cards[category.name] | length }}</span>
                        </a>
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        <!-- Other Categories -->
        <div class="row">
            {% for category in categories[2:] %}
                {% if category.name not in ["日清单", "周清单", "月清单", "年清单", "十年清单", "不重要不紧急", "紧急不重要", "重要不紧急", "重要紧急", "已开始清单"] %}
                    <div class="col-xs-6 col-sm-3 col-md-2 col-lg-2">
                        <a href="/cards/delete_category/{{ category.id }}" class="right delete-category red-text" title="delete it?">x</a>
                        <a href="/cards/category/{{ category.id }}" class="btn btn-success collection-item {% if category == category_now %}active{% endif %}">
                            {{ category.name }} <span class="badge {% if category == category_now %}white-text{% endif %}">{{ category.cards | length }}</span>
                        </a>
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        <!-- Add Category Form -->
        <div class="row">
            <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                <form id="add-category-form" action="/cards/new_category" method="POST">
                    <input class="form-control" placeholder="新分类？" name="name" id="category-input" type="text">
                    <button type="submit" class="btn btn-danger">添加</button>
                </form>
            </div>
        </div>

        <!-- Cards Table -->
        <div class="row">
            <div class="col-xs-12">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <caption>{{ category_now.name }}</caption>
                        <thead>
                            <tr>
                                <th>截止时间</th>
                                <th>标题</th>
                                <th>开始</th>
                                <th>结束</th>
                                <th>内容</th>
                                <th>完成</th>
                                <th>用时</th>
                                <th>删除</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                                <tr>
                                    <td>{{ item.updatetime }}</td>
                                    <td>{{ item.headline }}</td>
                                    <td><a href="/cards/begin_card/{{ item.id }}" title="begin it?">{{ '开始' if not item.begintime else '已开' }}</a></td>
                                    <td><a href="/cards/end_card/{{ item.id }}" title="end it?">{{ '结束' if not item.endtime else '未结' }}</a></td>
                                    <td><a href="/cards/edit_card/{{ item.id }}">修改</a></td>
                                    <td><a href="/cards/done/{{ item.id }}">完成</a></td>
                                    <td>{{ item.usedtime // 60 if item.usedtime else 0 }}</td>
                                    <td><a href="/cards/delete_item/{{ item.id }}" title="delete it?">删除</a></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="/static/js/core.js" type="text/javascript"></script>
</body>

</html>
